<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学号+姓名+家乡文化</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background: #fff;
        }
        .menu-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        .menu-item {
            margin-bottom: 10px;
        }
        .menu-header {
            background: #4CAF50;
            color: white;
            padding: 15px;
            cursor: pointer;
            border-radius: 6px;
            transition: background-color 0.3s;
        }
        .menu-header:hover {
            background: #2E7D32;
        }
        .menu-content {
            display: none;
            padding: 15px;
            background: #F1F8E9;
            border-radius: 0 0 6px 6px;
        }
        .sub-menu {
            list-style: none;
            padding: 0;
        }
        .sub-menu li {
            margin: 10px 0;
        }
        .sub-menu a {
            color: #2E7D32;
            text-decoration: none;
            transition: color 0.3s;
        }
        .sub-menu a:hover {
            color: #1B5E20;
            text-decoration: underline;
        }
        .culture-content {
            margin-top: 20px;
            padding: 20px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.menu-header').hover(function() {
                $(this).next('.menu-content').slideDown(300);
            });
            
            $('.menu-container').mouseleave(function() {
                $('.menu-content').slideUp(300);
            });
        });
    </script>
</head>
<body>
    <div class="menu-container">
        <div class="menu-item">
            <div class="menu-header">传统文化</div>
            <div class="menu-content">
                <ul class="sub-menu">
                    <li><a href="culture_detail1.html" target="content">民间艺术</a></li>
                    <li><a href="culture_detail2.html" target="content">传统节日</a></li>
                    <li>地方戏曲</li>
                </ul>
            </div>
        </div>
        
        <div class="menu-item">
            <div class="menu-header">历史遗迹</div>
            <div class="menu-content">
                <ul class="sub-menu">
                    <li><a href="culture_detail3.html" target="content">古建筑</a></li>
                    <li><a href="culture_detail4.html" target="content">历史故事</a></li>
                    <li>文物古迹</li>
                </ul>
            </div>
        </div>
        
        <div class="menu-item">
            <div class="menu-header">民俗风情</div>
            <div class="menu-content">
                <ul class="sub-menu">
                    <li>民间习俗</li>
                    <li>传统手工艺</li>
                    <li>地方方言</li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="culture-content">
        <h2>欢迎了解我们的家乡文化</h2>
        <p>请将鼠标移到上方菜单上，探索更多精彩内容...</p>
    </div>
</body>
</html> 